<template>
    <div class="binding">
        <div class="old_num" v-show="!isShow">
            <div class="old_num_tel">
                <input type="tel" placeholder="请输入旧的手机号" v-model="oldNum">
                <i class="icon iconfont icon-xiaoguanbi"></i>
            </div>
            <div class="old_num_code">
                <input type="num" placeholder="请输入验证码" v-model="oldCode">
                <input type="button" v-model="oldTime" @click="verifier('oldTime')" ref="oldTime">
            </div>
        </div>
        <div class="new_num" v-show="isShow">
            <div class="new_num_tel">
                <input type="tel" placeholder="请输入新的手机号" v-model="newNum">
                <i class="icon iconfont icon-xiaoguanbi"></i>
            </div>
            <div class="new_num_code">
                <input type="num" placeholder="请输入验证码" v-model="newCode">
                <input type="button" v-model="newTime" value="获取验证码" @click="verifier('newTime')" ref="newTime">
            </div>
        </div>
        <div class="btn">
            <button @click="yanzheng()">{{btnVal}}</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'binding',
        data() {
            return {
                btnVal: '下一步',
                isShow: false,
                oldNum: '',
                oldCode: '',
                oldTime: '获取验证码',
                newNum: '',
                newCode: '',
                newTime: '60',
            }
        },
        methods: {
            verifier(t) {
                const TIME_COUNT = '60';
                if (t == 'oldTime' && this.oldNum !== '' && this.oldNum.length == 11) {
                    this.oldTime = '60';
                    let timer = setInterval(() => {
                        if (this.oldTime > 0 && this.oldTime <= TIME_COUNT) {
                            this.oldTime --;
                            this.$refs.oldTime.disabled="disabled"
                        } else {
                            clearInterval(timer);
                            t = null;
                            this.$refs.oldTime.disabled = false
                            this.oldTime = '获取验证码'
                        }
                    }, 1000)
                    let params = {
                        phone: this.oldNum
                    }
                    this.$http.fetchGet('sendVerifyCode', params).then(res => {
                        if(res.code == 200){
                            this.$vux.toast.text(res.msg) 
                        } else {
                            this.$vux.toast.text(res.msg) 
                        }
                    }, err => {
                        this.$vux.toast.text(err) 
                    })
                } else if(t == 'newTime' && this.newNum !== '' && this.newNum.length == 11) {
                    let params = {
                        phone: this.newNum
                    }
                    this.$http.fetchGet('checkUserPhone', params).then(res => {
                        if(res.code == 200){
                            if(res.data.status == 0){
                                this.newTime = '60';
                                let timer = setInterval(() => {
                                    if (this.newTime > 0 && this.newNum <= TIME_COUNT) {
                                        this.newTime --;
                                        this.$refs.newTime.disabled = "true"
                                    } else {
                                        clearInterval(timer);
                                        t = null;
                                        this.$refs.newTime.disabled = false
                                        this.newTime = '获取验证码'
                                    }
                                }, 1000)
                                let params = {
                                    phone: this.newNum
                                }
                                this.$http.fetchGet('sendVerifyCode', params).then(res => {
                                    if(res.code == 200){
                                        this.$vux.toast.text(res.msg)
                                    } else {
                                        this.$vux.toast.text(res.msg) 
                                    }
                                }, err => {
                                    this.$vux.toast.text(err)
                                })
                            } else {
                                this.$vux.toast.text('手机号已存在')
                            }
                        } else {
                            this.$vux.toast.text(res.msg)
                        }
                    }, err => {
                        this.$vux.toast.text(err) 
                    })
                } else {
                    this.$vux.toast.text('请输入正确的手机号格式')
                }
            },
            yanzheng() {
                if(this.btnVal == '下一步') {
                    let params = {
                        phone: this.oldNum,
                        code: this.oldCode,
                    }
                    this.$http.fetchGet('checkVerifyCode', params).then(res => {
                        if(res.code == 200) {
                            this.btnVal = '完成'
                            this.isShow = true
                        } else {
                            this.$vux.toast.text('验证码错误')
                        }
                    }, err => {

                    })
                } else if(this.btnVal == '完成') {
                    if(this.oldNum !== '' && this.oldNum.length == 11 && this.newNum !== '' && this.newNum.length == 11 && this.newCode !== ''){
                        let params = {
                            oldPhone: this.oldNum,
                            userId: this.$store.state.userId,
                            newPhone: this.newNum,
                            code: newCode
                        }
                        this.$http.fetchGet('checkVerifyCode', params).then(res => {
                            if(res.code){
                                this.$vux.toast.text('绑定成功')
                                this.$router.push({
                                    path:'/safety'
                                })
                            } else {
                                this.$vux.toast.text(res.msg) 
                            }
                        }, err => {
                            this.$vux.toast.text(err) 
                        })
                    }
                }
            }
        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .binding{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .old_num, .new_num{
            width: 100%;
            .old_num_tel, .new_num_tel{
                width: 100%;
                .h(88);
                .padd(0, 20);
                .pr(80);
                box-sizing: border-box;
                position: relative;
                background: #fff;
                border-bottom: 1px solid #f2f2f2;
                .lh(88);
                input{
                    width: 100%;
                    .h(80);
                    border: none;
                    &:focus{
                        outline:none;
                    }
                }
                i{
                    position: absolute;
                    right: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .old_num_code, .new_num_code{
                width: 100%;
                // .h(88);
                .padd(0, 20);
                .pr(240);
                box-sizing: border-box;
                position: relative;
                background: #fff;
                border-bottom: 1px solid #f2f2f2;
                input[type=num]{
                    width: 100%;
                    .h(88);
                    border: none;
                    &:focus{
                        outline:none;
                    }
                }
                input[type=button]{
                    position: absolute;
                    right: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    .w(190);
                    .h(50);
                    border: none;
                    border: 1px solid #189BEB;
                    border-radius: 12px;
                    background: #fff;
                    color: #189BEB;
                    &:focus{
                        outline:none;
                    }
                }
            }
        }
        .btn{
            width: 100%;
            .h(88);
            .padd(0, 40);
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            button{
                width: 100%;
                .h(88);
                border: none;
                border: 1px solid #189BEB;
                color: #fff;
                background: #189BEB;
                border-radius: 5px;
            }
        }
    }
</style>
